<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { artListGetService } from '@/api/article'
import { formatTime } from '@/utils/formatTime'
import SelectBase from '@/components/SelectBase.vue'
import ArticleEditBase from '@/components/ArticleEditBase.vue'
// 是否处于等待动画
const isLoading = ref(false)
// 获取文章列表
const artList = ref() // 请求回来的数据
let total = 0 // 文章条数
const nowMessage = ref({ // 处理分页的数据
    pagenum: 1,
    pagesize: 3,
    cate_id: '',
    state: ''
})
const getArtList = async () => {
  isLoading.value = true
  const res = await artListGetService(nowMessage.value)
  isLoading.value = false
  // console.log(res)
  artList.value = res.data
  total = res.total
  ElMessage.success('获取文章列表成功')
}

getArtList()
// 发布文章的抽屉弹层功能
const artEditBase = ref()
const open = async (obj) => {
  await artEditBase.value.open(obj)
}
// 抽屉弹层结算完毕后————跳转至最新页面
const afterSubmit = (state) => {
  if (state === 'submit') {
    total += 1
    nowMessage.value.pagenum = Math.ceil(total / nowMessage.value.pagesize)
    getArtList()
  }
}
// 表单数据
const changeCateName = (e) => {
  nowMessage.value.cate_id = e
  // console.log(nowMessage.value.cateName)
}
// 搜索功能
const onSearch = () => {
  nowMessage.value.pagenum = 1
  getArtList()
}
// 重置功能
const onReset = () => {
  nowMessage.value.pagenum = 1
  nowMessage.value.cate_id = ''
  nowMessage.value.state = ''
  getArtList()
}
// 编辑一行数据
const editItem = (row) => {
  // console.log(row)
  open(row)
}
// 删除一行数据
const delItem = (row) => {
  console.log(row)
}
// 分页逻辑
  // 页码数变化
  const handleCurrentChange = (value) => {
    // console.log(`当前是第${value}页`)
    nowMessage.value.pagenum = value
    getArtList()
  }
  // 页码尺寸变化(1页多少条数据)
  const handleSizeChange = (value) => {
    // console.log(`当前一页${value}条数据`)
    nowMessage.value.pagesize = value
    nowMessage.value.pagenum = 1
    getArtList()
  }
</script>

<template>
  <!-- 文章管理 -->
  <el-card>
    <template #header>
      <div class="header">
        <p>文章管理</p>
        <el-button type="primary" @click="open({})">发布文章</el-button>
      </div>
    </template>
    <!-- 搜索模块 -->
    <el-form inline :model="nowMessage">
      <SelectBase
        v-model:modelValue="nowMessage.cate_id"
        width="200px"
      ></SelectBase>
      <el-form-item label="发布状态" >
        <el-select style="width:200px" v-model="nowMessage.state">
          <el-option label="已发布" value="已发布">已发布</el-option>
          <el-option label="草稿" value="草稿">草稿</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 展示文章模块 -->
    <el-table :data="artList" v-loading="isLoading">
      <el-table-column label="文章标题" prop="title">
        <template #default="scope">
          <el-link type="primary" :underline="false">
            {{ scope.row.title }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"></el-table-column>
      <el-table-column label="发表时间" prop="pub_date">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" circle plain @click="editItem(row)"></el-button>
          <el-button type="danger" :icon="Delete" circle plain @click="delItem(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <!-- 分页模块 -->
      <el-pagination
      style="justify-content:flex-end"
      v-model:current-page="nowMessage.pagenum"
      v-model:page-size="nowMessage.pagesize"
      :page-sizes="[2, 3, 1]"
      :background=true
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </template>
  </el-card>

  <!-- 抽屉弹层 -->
  <ArticleEditBase ref="artEditBase" @success="afterSubmit"></ArticleEditBase>
</template>

<style lang="scss" scoped>
.header {
  display:flex;
  justify-content:space-between;
}
</style>